import React, {useState, useEffect, useMemo} from 'react';
import { no_del, WaitUmd, show_mt, is_empty, Btn, obj_str, loc, PanelFind, Ret, Title, filter_row, save_data, InfoDlg, useCmd,
    Bar, BtTxt, useHigh, GridTable } from 'sui';
import { do_del, reload_psn } from './cmd';
import { load_col_psn } from 'task/psn/cmd';

const PsnView = ({ cur, hreturn }) => {
    const [main, setMain] = useState();
    const [open_info, openInfo] = useState(false);
    const [col, setCol] = useState();
    const [high] = useHigh(140, 100);
    const umd = useCmd();

    useEffect(() => {
        load_col_psn(setCol);
        reload_psn(null, setMain, cur);
    }, [cur]);

    const getRow = useMemo(() => {
        if (is_empty(col)) {
            return null;
        }

        const lst = col.map(d => d.sn);
        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter, col]);

    const hdel = (v) => {
        if (no_del()) {
            return;
        }

        do_del(umd, cur, v, () => reload_psn(umd.endWait, setMain, cur));
    };

    const getCol = () => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
            {name: loc("l_238"), key: 'e_opt', width: 90, frozen: true, formatter: (props) => {
                const d = props.row;
                return (
                    <div className="inline-flex">
                        <BtTxt hcmd={() => hdel(d)}>{loc("l_237")}</BtTxt>
                    </div>
                );
            }},
            {name: loc("l_857"), key: 'st', width: 90, formatter: (props) => {
                const d = props.row;
                const st = obj_str(d, "st");

                if (st === "out") {
                    return <Bar cl="green" flag="Y"/>;
                }

                return <Bar flag="N"/>;
            }},
            {name: loc("l_851"), key: 'boxgood', width: 110},
        ];

        col.forEach(d => {
            const sn = obj_str(d, "sn");
            if (sn.startsWith("box")) {
                return;
            }

            show_mt(tmp, d, 110);
        });

        return tmp;
    };

    const hOut = () => {
        const name = obj_str(cur, "sn");
        const col = getCol();

        save_data(main, col, name, umd);
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn className="ml-4" hcmd={hOut} color="green">{loc("l_298")}</Btn>
            <Ret className="ml-4" hcmd={hreturn}/>
        </div>
    );

    return (
        <div className="flex flex-col">
            <PanelFind left={<Title mod={obj_str(cur, "sn")} sub={loc("l_152")}/>} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable high={high} col={getCol()} row={getRow}/>
            <InfoDlg open={open_info} setOpen={openInfo} msg={loc("l_855")} hcmd={() => umd.endWait()} hcancel={() => openInfo(false)}/>
            <WaitUmd umd={umd}/>
        </div>
    );
};

export {PsnView};
